<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="王劲翔">
    <title>帝可得</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <script src="./lib/axios.min.js"></script>
    <script src="./lib/FunctionToolsJS.js"></script>
    <script src="./utils/request.js"></script>
    <script src="./js/indexActive.js"></script>
</head>

<body>
    <!-- 顶栏 -->
    <div class="header">
        <img src="./images/logo_in.png" alt="" class="logo">
        <div class="right">
            <div class="user">
                <img src="./images/user.jpg" alt="">
                <h2 class="username"></h2>
            </div>
            <a href="javascript:;" class="logout">退出<span class="iconfont icon-xiangxia"></span></a>
        </div>
    </div>
    <!-- 左侧栏 -->
    <div class="left">
        <ul>
            <li>
                <a class="firstFloor" href="javascript:;">
                    <div><span class="iconfont icon-fangzi"></span>帝可得</div>
                </a>
            </li>
            <li>
                <a class="firstFloor" href="javascript:;">
                    <div><span class="iconfont icon-gongdan"></span>工单管理</div><span
                        class="iconfont icon-xiangxia2"></span>
                </a>
                <ul class="secondFloor">
                    <li>
                        <a href="javascript:;">运营工单</a>
                    </li>
                    <li>
                        <a href="javascript:;">运维工单</a>
                    </li>
                </ul>
            </li>
            <li>
                <a class="firstFloor" href="javascript:;">
                    <div><span class="iconfont icon-dianweizongshu"></span>点位管理</div><span
                        class="iconfont icon-xiangxia2"></span>
                </a>
                <ul class="secondFloor">
                    <li>
                        <a href="javascript:;">区域管理</a>
                    </li>
                    <li>
                        <a href="javascript:;">点位管理</a>
                    </li>
                    <li>
                        <a href="javascript:;">合作商管理</a>
                    </li>
                </ul>
            </li>
            <li>
                <a class="firstFloor" href="javascript:;">
                    <div><span class="iconfont icon-device"></span>设备管理</div><span
                        class="iconfont icon-xiangxia2"></span>
                </a>
                <ul class="secondFloor">
                    <li>
                        <a href="javascript:;">设备管理</a>
                    </li>
                    <li>
                        <a href="javascript:;">设备状态</a>
                    </li>
                    <li>
                        <a href="javascript:;">设备类型管理</a>
                    </li>
                </ul>
            </li>
            <li>
                <a class="firstFloor" href="javascript:;">
                    <div><span class="iconfont icon-renyuanguanli"></span>人员管理</div><span
                        class="iconfont icon-xiangxia2"></span>
                </a>
                <ul class="secondFloor">
                    <li>
                        <a href="javascript:;">人员管理</a>
                    </li>
                    <li>
                        <a href="javascript:;">人效统计</a>
                    </li>
                    <li>
                        <a href="javascript:;">工作量列表</a>
                    </li>
                </ul>
            </li>
            <li>
                <a class="firstFloor" href="javascript:;">
                    <div><span class="iconfont icon-component"></span>商品管理</div><span
                        class="iconfont icon-xiangxia2"></span>
                </a>
                <ul class="secondFloor">
                    <li>
                        <a href="javascript:;">商品类型</a>
                    </li>
                    <li>
                        <a href="javascript:;">商品管理</a>
                    </li>
                </ul>
            </li>
            <li>
                <a class="firstFloor" href="javascript:;">
                    <div><span class="iconfont icon-dengpao"></span>策略管理</div>
                </a>
            </li>
            <li>
                <a class="firstFloor" href="javascript:;">
                    <div><span class="iconfont icon-dingdanjihe"></span>订单管理</div>
                </a>
            </li>
            <li>
                <a class="firstFloor" href="javascript:;">
                    <div><span class="iconfont icon-zhangdan_o"></span>对账统计</div>
                </a>
            </li>
        </ul>
    </div>
    <!-- 主体 -->
    <div class="box">
        <div class="topBox">
            <div class="leftBox">
                <div class="topBox2">
                    <!-- 工单统计 -->
                    <div class="workOrderStatistics">
                        <div class="workTitle">
                            <h3>工单统计</h3>
                            <p>2023.09.01 ~ 2023.09.25</p>
                        </div>
                        <ul class="workContent">
                            <li>
                                <h3>0</h3>
                                <p>工单总数（个）</p>
                            </li>
                            <li>
                                <h3>0</h3>
                                <p>完成工单（个）</p>
                            </li>
                            <li>
                                <h3>0</h3>
                                <p>进行工单（个）</p>
                            </li>
                            <li>
                                <h3>0</h3>
                                <p>取消工单（个）</p>
                            </li>
                        </ul>
                    </div>
                    <!-- 销售统计 -->
                    <div class="salesStatistics">
                        <div class="salesTitle">
                            <h3>销售统计</h3>
                            <p>2023.09.01 ~ 2023.09.25</p>
                        </div>
                        <ul class="salesContent">
                            <li>
                                <h3>12041</h3>
                                <p>订单量（个）</p>
                            </li>
                            <li>
                                <h3>120.33</h3>
                                <p>销售额（元）</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 销售数据 -->
                <div class="bottomBox2">
                    <div class="salesDataLeft">
                        <div class="title">
                            <h3>销售数据</h3>
                            <p>2023.09.25 ~ 2023.09.25</p>
                        </div>
                        <!-- *** 表格渲染 *** -->
                        <div class="salesData_Legend_Left"></div>
                    </div>
                    <div class="salesDataRight">
                        <div class="title">
                            <div class="Backboard"></div>
                            <a href="javascript:;">
                                <p>周</p>
                            </a>
                            <a href="javascript:;">
                                <p>月</p>
                            </a>
                            <a href="javascript:;">
                                <p>年</p>
                            </a>
                        </div>
                        <div class="salesData_Legend_Right"></div>
                    </div>
                </div>
            </div>
            <!-- 商品热榜 -->
            <div class="rightBox">
                <div class="productHotListTitle">
                    <h3>商品热榜</h3>
                    <p>2023.09.01 ~ 2023.09.25</p>
                </div>
                <ul class="productHotListContent">
                    <li>
                        <span class="num">1</span>
                        <div>
                            <p>茉莉花茶</p>
                            <span>1361单</span>
                        </div>
                    </li>
                    <li>
                        <span class="num">2</span>
                        <div>
                            <p>茉莉花茶</p>
                            <span>1361单</span>
                        </div>
                    </li>
                    <li>
                        <span class="num">3</span>
                        <div>
                            <p>茉莉花茶</p>
                            <span>1361单</span>
                        </div>
                    </li>
                    <li>
                        <span class="num">4</span>
                        <div>
                            <p>茉莉花茶</p>
                            <span>1361单</span>
                        </div>
                    </li>
                    <li>
                        <span class="num">5</span>
                        <div>
                            <p>茉莉花茶</p>
                            <span>1361单</span>
                        </div>
                    </li>
                    <li>
                        <span class="num">6</span>
                        <div>
                            <p>茉莉花茶</p>
                            <span>1361单</span>
                        </div>
                    </li>
                    <li>
                        <span class="num">7</span>
                        <div>
                            <p>茉莉花茶</p>
                            <span>1361单</span>
                        </div>
                    </li>
                    <li>
                        <span class="num">8</span>
                        <div>
                            <p>茉莉花茶</p>
                            <span>1361单</span>
                        </div>
                    </li>
                    <li>
                        <span class="num">9</span>
                        <div>
                            <p>茉莉花茶</p>
                            <span>1361单</span>
                        </div>
                    </li>
                    <li>
                        <span class="num">10</span>
                        <div>
                            <p>茉莉花茶</p>
                            <span>1361单</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottomBox">
            <!-- 合作商点位数 -->
            <div class="cooperationPoints"></div>
            <!-- 异常设备监控 -->
            <div class="abnormalEquipment"></div>
        </div>
    </div>
    <!-- 列表 -->
    <div class="dataList"></div>
</body>
<script src="./js/index.js"></script>

</html>